<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>自定义指令</h1>
        <div v-text="msg"></div>
        <div v-text-danger="msg"></div>
        <div>
            用户名:<input type="text" v-bind-blue="username">
        </div>

    </div>


    <!--
           一个需求
           需要一个指令,可以和v-bind指令完成相同的功能,同时将该元素的父级元素的背景色设置为蓝色
       -->
    <div id="app2">
        <div v-text-danger="msg"></div>
        <div>
            用户名:<input type="text" v-bind-blue="name">
        </div>
    </div>
    <script>

        //定义全局指令
        //函数式
        Vue.directive('text-danger' , function (element , binding){
            //对于自定义指令来说,函数体当中的this是window,而不是Vue实例
            console.log(this)
            element.innerHTML = binding.value
            element.style.color = 'red'
        })

        //对象式
        Vue.directive('bind-blue' , {
            bind(element, binding){
                element.value = binding.value
                console.log(this)
            },
            inserted(element , binding){
                element.parentNode.style.backgroundColor = 'skyblue'
                console.log(this)
            },
            update(element , binding){
                element.value = binding.value
                console.log(this)
            }
        })


         const vm2 = new Vue({
                 el : '#app2',
                 //Model M
                 data : {
                    msg : '欢迎学习Vue框架!',
                    username : 'lucy'
                 }
             })


         const vm = new Vue({
                 el : '#app',
                 //Model M
                 data : {
                     msg : '自定义指令',
                     username : 'jackson'
                 },
                //下面是自定义指令
                directives : {
                     //指令1
                    //指令2
                    //...
                    /**关于指令的名字:1.v-不需要写  2，Vue官方建议指令的名字要全部小写,如果是多个单词的话,请使用
                    - 进行衔接
                     这个回调函数的执行时机包括两个:第一个:标签和指令第一次绑定的时候,第二个,模版被重新解析的时候
                     这个回调函数有两个参数:第一个参数是真实的dom元素,第二个参数是标签与指令之间绑定的关系的对象
                    **/
                    //这种方式属于函数式方式
                    // 'text-danger' : function (element , binding){
                    //     console.log('@')
                    //     console.log(element)
                    //     console.log(binding)
                    //     //下面使用的是原生的js,所以,不管框架怎么学,基础是最重要的
                    //     element.innerText = binding.value
                    //     element.style.color = 'red'
                    // },
                    // 'bind-blue' : function (element , binding){
                    //     console.log(element , binding)
                    //     element.value = binding.value
                    //     //为什么这里是null,原因是这个函数在执行的时候,指令和元素完成了绑定.但是只是在内存中完成了绑定
                    //     //元素还没有插入到页面当中
                    //     console.log(element.parentNode)
                    //     element.parentNode.style.backgroundColor = 'blue'
                    // },

                    //对象式
                    // 'bind-blue' : {
                    //     //这个对象中三个方法的名字不能随便写
                    //     //这三个函数将来都会被自动调用
                    //     //注意,在特定的时间节点调用特定的函数,这种调用被称为钩子函数
                    //     //元素与指令初次绑定的时候,自动调用bind
                    //     bind(element , binding){
                    //         console.log('binding')
                    //         element.value = binding.value
                    //     },
                    //     //元素被插入到页面之后,这个函数会被自动调用
                    //     inserted(element , binding){
                    //         console.log('inserted')
                    //         element.parentNode.style.backgroundColor = 'blue'
                    //     },
                    //     //当模版被重新解析的时候,这个函数会被自动调用
                    //     update(element , binding){
                    //         console.log('update')
                    //         element.value = binding.value
                    //     }
                    // }
                }

             })
    </script>


</body>
</html>